<template>
  <div>
    <br />
    <a-row>
      <a-col span="2">Base64</a-col>
      <a-col span="22">
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="textBtnClick(true, false)"
        >
          编 码
        </a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="textBtnClick(false, false)"
        >
          解 码
        </a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="textBtnClick(true, true)"
        >
          hex编码
        </a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="textBtnClick(false, true)"
        >
          hex解码
        </a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="imageBtnClick(true)"
        >
          图片编码
        </a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="imageBtnClick(false)"
        >
          图片解码
        </a-button>
      </a-col>
    </a-row>

    <w-modal
      ref="WModal_text"
      :title="'base64' + (hex ? '(hex)' : '') + (coding ? '编码' : '解码')"
      :ok-type="form.data ? 'danger' : 'primary'"
      :ok-text="form.data ? '清 除' : '确 定'"
      @ok="textOkBtnClick"
    >
      <p v-if="hex && coding">需要先用Base64编码</p>
      <a-input
        v-model="form.inputValue"
        type="textarea"
        placeholder="请输入..."
      />
      <w-copy-text
        v-if="form.data"
        :top="20"
        class="w-text-warp"
        :text="form.data"
      >
        {{ form.data }}
      </w-copy-text>
    </w-modal>

    <!--提示框-->
    <w-modal
      ref="WModal_image"
      :title="'base64-图片' + (coding ? '编码' : '解码')"
      :ok-text="form.data ? '清 除' : '确 定'"
      :ok-type="form.data ? 'danger' : 'primary'"
      @ok="imageOkBtnClick"
    >
      <image-up v-if="coding" ref="WImageUp" />
      <template v-else>
        <a-input
          v-model="form.inputValue"
          type="textarea"
          placeholder="请输入..."
        />
        <br /><br />
        <img
          v-if="form.data"
          :src="form.data"
          style="max-width: 200px; max-height: 200px;"
        />
      </template>
    </w-modal>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import WModal, { ModalComType } from '@/components/global/modal'
import { Api } from '@/config/api'
import ImageUp from '@/components/global/imageUp/server'

@Component({
  name: 'WebToolCodingBase64',
  components: {
    WModal,
    ImageUp
  }
})
export default class WebToolCodingBase64 extends Vue {
  /**
   * 编码还是解码
   */
  coding = true
  /**
   * hex
   */
  hex = false
  form = {
    inputValue: '',
    data: ''
  }

  type = ''
  /**
   * 图片base64是否显示
   */
  imageBase64 = null

  clearBtnClick () {
    this.form = {
      inputValue: '',
      data: ''
    }
  }

  textBtnClick (coding:any, hex:any) {
    this.form = {
      inputValue: '',
      data: ''
    }
    this.coding = coding
    this.hex = hex
    this.type = this.getType();
    (this.$refs.WModal_text as ModalComType).show()
  }

  // 获取类型
  getType () {
    if (this.coding) {
      return this.hex ? 'hexEncode' : 'encode'
    } else {
      return this.hex ? 'hexDecode' : 'decode'
    }
  }

  textOkBtnClick () {
    if (this.form.data) {
      this.clearBtnClick()
      return
    }
    if (!this.form.inputValue) {
      this.$message.error('请输入数据')
      return
    }
    (this.$refs.WModal_text as ModalComType).showLoading()
    this.$wAxios
      .$post(Api.coding.base64, {
        code: this.form.inputValue,
        type: this.type
      })
      .then((data) => {
        this.form.data = data
      })
      .catch(() => {})
      .finally(() => {
        (this.$refs.WModal_text as ModalComType).hideLoading()
      })
  }

  imageBtnClick (coding:any) {
    this.coding = coding
    this.form.inputValue = ''
    this.form.data = '';
    (this.$refs.WModal_image as ModalComType).show()
  }

  imageOkBtnClick () {
    if (this.form.data) {
      this.clearBtnClick()
      return
    }
    if (this.coding) {
      (this.$refs.WModal_image as ModalComType).showLoading();
      (this.$refs.WImageUp as any).upImage()
        .then((data:any) => {
          this.form.inputValue = data.filepath
          this.$wAxios
            .$post(Api.coding.imageToBase64, {
              imageUrl: this.form.inputValue
            })
            .then((data) => {
              this.$wCopy(data)
            })
            // eslint-disable-next-line @typescript-eslint/no-empty-function
            .catch(() => {})
            .finally(() => {
              (this.$refs.WModal_image as ModalComType).hideLoading()
            })
        })
        .catch((err:any) => {
          this.$message.error(err.msg);
          (this.$refs.WModal_image as ModalComType).hideLoading()
        })
    } else {
      if (!this.form.inputValue) {
        this.$message.error('请输入数据')
        return
      }
      (this.$refs.WModal_image as ModalComType).showLoading();
      this.$wAxios
        .$post(Api.coding.base64ToImage, {
          imageData: this.form.inputValue
        })
        .then((data) => {
          this.form.data = `/${process.env.API_HEADER}${data}`
        })
        .catch(() => {})
        .finally(() => {
          (this.$refs.WModal_image as ModalComType).hideLoading()
        })
    }
  }
}

</script>
